<template>
  <div>
  <div class="banner-warp">
      <div class="banner">
        <div class="warp">
            <div class="top-p1">汇聚测试精英 提升软件质量</div>
            <div class="top-p2"> 专业的测试者众包平台，更多任务，更多收益，更加自由</div>
        </div>
      </div>
     
    </div>
     <!-- 兼职任务-->
      <div class="mid-wrap">
        <div class="wrap">
          <div class='intro-wrap'>
        <div class="intro-left"> 
          <span class="intro-left-p1">兼职任务</span>
          <span class="intro-left-p2">兼职任务灵活度高</span>
        </div>
        <div class="intro-p">兼职任务，仅需要在任务期间通过网络为客户提供测试服务，薪水为项目制，项目收入100-300元，日入500-800元，咨询QQ群：531011496。</div>
        </div> 

    <ul class="task-ul">
          <li>
            <router-link to="">
              <div style="width:100%">
                  <img class="task-logo" src="https://testin-ee0.oss-cn-hangzhou.aliyuncs.com/4012522_736959_app_20190418_icon_6adde62fb3e949fdb6c5533ea9f505e9.png">
                <Row>
        <i-col span="8"><span class="task-span">任务类型: </span></i-col>
        <i-col span="6"> <span class='col-737'>Bug探索</span></i-col>
            </Row>
                 <Row>
                   <i-col span="8"><span class="task-span">截止时间: </span></i-col>
                    <i-col span="16"> <span class='col-737'>2019-04-20 19:00</span></i-col>
                 </Row> 
                 <br>
                <Row>
                   <i-col span="8" ><span class="nh-task-yu">预计收益: </span></i-col>
                    <i-col span="8" offset="8"><span class="text-orange fs-24 fw-600">100</span> <span class="text-orange">元</span></i-col>
                 </Row> 
                         <p class="text-li-borer"></p>
              </div>
            </router-link>
          </li>
      
        <li>
            <router-link to="">
              <div style="width:100%">
                  <img class="task-logo" src="https://testin-ee0.oss-cn-hangzhou.aliyuncs.com/4012522_736959_app_20190418_icon_6adde62fb3e949fdb6c5533ea9f505e9.png">
                <Row>
        <i-col span="8"><span class="task-span">任务类型: </span></i-col>
        <i-col span="6"> <span class='col-737'>Bug探索</span></i-col>
            </Row>
                 <Row>
                   <i-col span="8"><span class="task-span">截止时间: </span></i-col>
                    <i-col span="16"> <span class='col-737'>2019-04-20 19:00</span></i-col>
                 </Row> 
                 <br>
                <Row>
                   <i-col span="8" ><span class="nh-task-yu">预计收益: </span></i-col>
                    <i-col span="8" offset="8"><span class="text-orange fs-24 fw-600">100</span> <span class="text-orange">元</span></i-col>
                 </Row> 
                 <p class="text-li-borer"></p>
              </div>
            </router-link>
          </li>

            <li>
            <router-link to="">
              <div style="width:100%">
                  <img class="task-logo" src="https://testin-ee0.oss-cn-hangzhou.aliyuncs.com/4012522_736959_app_20190418_icon_6adde62fb3e949fdb6c5533ea9f505e9.png">
                <Row>
        <i-col span="8"><span class="task-span">任务类型: </span></i-col>
        <i-col span="6"> <span class='col-737'>Bug探索</span></i-col>
            </Row>
                 <Row>
                   <i-col span="8"><span class="task-span">截止时间: </span></i-col>
                    <i-col span="16"> <span class='col-737'>2019-04-20 19:00</span></i-col>
                 </Row> 
                 <br>
                <Row>
                   <i-col span="8" ><span class="nh-task-yu">预计收益: </span></i-col>
                    <i-col span="8" offset="8"><span class="text-orange fs-24 fw-600">100</span> <span class="text-orange">元</span></i-col>
                 </Row> 
                         <p class="text-li-borer"></p>
              </div>
            </router-link>
          </li>
           
    </ul> 
    <row>
       <i-col span="24" > <div class="text-center"> <i-button type="info">更多兼职任务</i-button></div></i-col>
   
    </row>
      <row type="flex" align="middle" class="info-back">
          <i-col span="8"  > 

           <div class="intro-left-another"> 
          <span class="intro-left-p1-another">驻场任务</span>
          <span class="intro-left-p2-another">驻场工作收益翻倍</span>
        </div>
          </i-col>
          
     <i-col span="13"  >   <div style="font-size:14px">驻场任务需要测试专家抵达客户指定地点进行测试，薪水为日薪制，预计可日入800-1500元</div>
       </i-col>
   </row>
     <ul class="task-ul">
          <li>
            <router-link to="">
              <div style="width:100%">
                  <img class="task-logo" src="https://testin-ee0.oss-cn-hangzhou.aliyuncs.com/4012522_736959_app_20190418_icon_6adde62fb3e949fdb6c5533ea9f505e9.png">
                <Row>
        <i-col span="8"><span class="task-span">任务类型: </span></i-col>
        <i-col span="6"> <span class='col-737'>Bug探索</span></i-col>
            </Row>
                 <Row>
                   <i-col span="8"><span class="task-span">截止时间: </span></i-col>
                    <i-col span="16"> <span class='col-737'>2019-04-20 19:00</span></i-col>
                 </Row> 
                 <br>
                <Row>
                   <i-col span="8" ><span class="nh-task-yu">预计收益: </span></i-col>
                    <i-col span="8" offset="8"><span class="text-orange fs-24 fw-600">100</span> <span class="text-orange">元</span></i-col>
                 </Row> 
                         <p class="text-li-borer"></p>
              </div>
            </router-link>
          </li>
      
        <li>
            <router-link to="">
              <div style="width:100%">
                  <img class="task-logo" src="https://testin-ee0.oss-cn-hangzhou.aliyuncs.com/4012522_736959_app_20190418_icon_6adde62fb3e949fdb6c5533ea9f505e9.png">
                <Row>
        <i-col span="8"><span class="task-span">任务类型: </span></i-col>
        <i-col span="6"> <span class='col-737'>Bug探索</span></i-col>
            </Row>
                 <Row>
                   <i-col span="8"><span class="task-span">截止时间: </span></i-col>
                    <i-col span="16"> <span class='col-737'>2019-04-20 19:00</span></i-col>
                 </Row> 
                 <br>
                <Row>
                   <i-col span="8" ><span class="nh-task-yu">预计收益: </span></i-col>
                    <i-col span="8" offset="8"><span class="text-orange fs-24 fw-600">100</span> <span class="text-orange">元</span></i-col>
                 </Row> 
                 <p class="text-li-borer"></p>
              </div>
            </router-link>
          </li>
            <li>
            <router-link to="">
              <div style="width:100%">
                  <img class="task-logo" src="https://testin-ee0.oss-cn-hangzhou.aliyuncs.com/4012522_736959_app_20190418_icon_6adde62fb3e949fdb6c5533ea9f505e9.png">
                <Row>
        <i-col span="8"><span class="task-span">任务类型: </span></i-col>
        <i-col span="6"> <span class='col-737'>Bug探索</span></i-col>
            </Row>
                 <Row>
                   <i-col span="8"><span class="task-span">截止时间: </span></i-col>
                    <i-col span="16"> <span class='col-737'>2019-04-20 19:00</span></i-col>
                 </Row> 
                 <br>
                <Row>
                   <i-col span="8" ><span class="nh-task-yu">预计收益: </span></i-col>
                    <i-col span="8" offset="8"><span class="text-orange fs-24 fw-600">100</span> <span class="text-orange">元</span></i-col>
                 </Row> 
                         <p class="text-li-borer"></p>
              </div>
            </router-link>
          </li>    
    </ul> 
     <row>
       <i-col span="24"  > <div class="text-center"> <i-button type="info">更多驻场任务</i-button></div></i-col>
   
    </row>

    <!-- 底部描述图像 -->
    <row class="footer-info">
        <i-col span="24" class="p1"> 加入众测 收获多多</i-col>
         <i-col span="24" class="p2"> 离岸工作OR驻场工作多种类型由你选择，闲暇时间赚取零用钱，驻场获得高倍</i-col>
          <i-col span="24" class="p2"> 收益，名企驻场经验，专家技术指导，提升个人能力收获多多</i-col>
    </row>
    <br>
    <row type="flex" justify="center" style="text-align:center" >
          <i-col span="8"  > <img src="/images/nh-join-1.png" class="join-img"><p class="p3">工作方式灵活</p></i-col>
              <i-col span="8" > <img src="/images/nh-join-2.png" class="join-img"> <p class="p3">赚取高额收益</p></i-col>
                  <i-col span="8" > <img src="/images/nh-join-3.png" class="join-img"><p class="p3">提升个人技能</p> </i-col>
    </row>

        </div>
        </div>
      
  </div>
  
</template>

<script>
import Logo from '~/components/Logo.vue'
import { Query_User } from '~/graphql/graphql'
export default {
  components: {
    Logo
  },
  asyncData(context){
 //   context.app.myInjectedFunction('ctx!')
    console.log(context);
    console.log(111);
  },
    methods: {
        signup () {
          console.log(this.$apollo)
            this.$apollo
                .query({
                    query :Query_User,
                })
                .then(response => {
                    // 重定向到登录页面
                   console.log(response)
                })
            }
        }
    }


</script>

<style>
@import "~/assets/index.css";
.banner-warp{
  background: -webkit-linear-gradient(#194DE8,#1a4DE8);
  background:linear-gradient(#194DE8,#1a4DE8);
  height: 400px;
  margin-top:60px;
}
.banner{
  height: 400px;
  background: url("/images/newhall-banner.png") no-repeat 100% 100%;
}
.text-center{
  text-align: center;
  margin-top: 30px;
  
}
.join-img{
  height: 95px;

}
.p1{
  font-size: 34px;
  color: #1d2e41
}
.p2{
  font-size:16px;
  color: #637282;
}
.p3{
  font-size: 18px;
  color: #1d2e41;
  margin-top: 10px;
}
.footer-info{
  margin-top: 100px;
  text-align: center;
}
.info-back{
  background-color: #fff;
  box-shadow: #fff;
}
.warp{
  width: 1180px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.text-li-borer{
  background:-webkit-linear-gradient(45deg ,#84DEFF,#3087FF);
  left: 0;
  bottom: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  height: 4px;
}
.top-p1,.top-p2{
  padding-left:100px;
  padding-top:100px;
  color: #fff;
  font-weight: 300;
  font-size: 40px;
}
.top-p2{
  font-size: 18px;
  padding-top: 0;
}
</style>